<template>
   <div class="cnyzsMemeber">
      <div class="title">
         <button style="background: #444;" @click="getblacklist">黑名单</button>
         <button @click="getblacklist">查找成员</button>
         <input type="text" placeholder="请输入用户名称">
      </div>
      <div class="memberlist">
         <ul>
            <li v-for="(item, index) in userlist" :key="index">
               <el-image style="width: 100%; height: 100%" :src="item.systemUserId?.useravatar" fit="cover" />
               <div class="name">{{ item.systemUserId.username }}</div>
               <el-dropdown v-if="SystemData.SystemInfo.systemCreateUser._id !== item.systemUserId._id">
                  <span class="el-dropdown-link">
                     <div class="set">操作成员</div>
                  </span>
                  <template #dropdown>
                     <el-dropdown-menu>
                        <el-dropdown-item @click="getblacklist">黑名单</el-dropdown-item>
                        <el-dropdown-item @click="addSystemAdmin(item.systemUserId._id)">设为管理员</el-dropdown-item>
                     </el-dropdown-menu>
                  </template>
               </el-dropdown>
               <div class="set" v-else style="padding: 4.5px 14px;">系统管理</div>
            </li>
         </ul>
      </div>

      <!-- 分页 -->
      <div class="fenye">
         <!-- <el-pagination v-model:currentPage="Paging_CurrentPage" v-model:page-size="Paging_pageSize"
            :page-sizes="[10, 20, 30, 40, 50, 100]" layout="total, sizes, prev , pager, next, jumper"
            :total="userlisttotal" @size-change="sizeChange" @current-change="currentChange" /> -->
      </div>
   </div>
</template>
<script lang="ts" setup >
import { ElMessage } from "element-plus";

const props = defineProps({
   SystemData: {
      type: Object,
      default: {
         SystemInfo: {},
         SystemConfig: {},
         SystemAnnounceList: [],
         SystemUserInfo: [],
         SystemUserList: [],
         SystemClassifyList: [],
         SystemPostsList: [],
      }
   }
})
const limit = ref(10) // 默认显示每页10条数据
const page = ref(1) // 默认显示第1页
const userlist: any = ref({}) // 成员列表
const total = ref(0) // 成员总数

// 获取系统成员列表
const getmemberslist = async () => {
   const res: any = await cnyzsRequest('/api/cnyzs-system-user/list/' + props.SystemData.SystemInfo._id, {
      method: 'POST', data: {
         limit: limit.value,
         page: page.value
      }
   })
   if (res.status === 200) {
      userlist.value = res.data.data
      total.value = res.data.total
   } else {
      userlist.value = []
   }
}
getmemberslist()

// 获取黑名单成员
const getblacklist = () => {
   ElMessage.warning("接口未完成")
}

// 添加系统管理员
const addSystemAdmin = async (userId: string) => {
   const res: any = await cnyzsRequest('/api/cnyzs-system-user/add-admin', {
      method: 'POST', data: {
         systemId: props.SystemData.SystemInfo._id,
         userId: userId
      }
   })
   if (res.status === 200) return ElMessage.success(res.message)
   ElMessage.error(res.message)
}





// const sizeChange = (val: number) => {
//    listQuery.value.limit = val // 改变每页显示条数
//    useUsers.Getuserlist(listQuery.value)
// }
// const currentChange = (val: number) => {
//    listQuery.value.page = val // 改变当前页
//    useUsers.Getuserlist(listQuery.value)
// }
</script>
<style lang="scss" scoped>
::-webkit-scrollbar-thumb {
   background-color: var(--aoir-color-primary-2);
   border-radius: 15px;
}

button {
   background: #419643;
   border: 0;
   box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2);
   color: #fdfdfd;
   cursor: pointer;
   display: flex;
   align-items: center;
   font-size: 14px;
   font-weight: 600;
   height: 35px;
   justify-content: center;
   margin-right: 15px;
   padding: 0 15px;
   transition: all 0.2s;
   border-radius: 8px;

   &:hover {
      opacity: .8;
   }
}

input {
   width: 570px;
   height: 45px;
   border: 0;
   font-size: 16px;
   background-color: #FFF;
   border-bottom: 1px solid #f5f6f7;
   caret-color: var(--aoir-color-primary-2);
   padding: 0 10px;
   border-radius: var(--aoir-border-radius);
   box-shadow: 0 0 35px 0 rgb(108 108 108 / 10%);

   &::placeholder {
      color: #CCD0DB;
   }
}

.cnyzsMemeber {
   width: 100%;
   height: 100%;

   .title {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      input {
         flex: 1;
      }
   }

   .memberlist {
      width: 100%;

      ul {
         width: 100%;
         display: flex;
         flex-wrap: wrap;

         li {
            width: 130px;
            // height: 170px;
            margin-right: 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 15px;
            padding: 15px;
            border-radius: 10px;
            background-color: #f5f5f588;
            border: 2px solid #EEE;
            cursor: pointer;
            box-shadow: 0 0 35px 0 rgb(108 108 108 / 21%);
            transition: all .3s;

            &:nth-child(5n) {
               margin-right: 0;
            }

            &:hover {
               transform: translateY(-5px);
               // border: 2px solid var(--aoir-color-primary);
               opacity: .8;
            }

            .el-image {
               width: 70px !important;
               height: 70px !important;
               border-radius: 10px;
               box-shadow: 0 0 35px 0 rgba(108, 108, 108, 0.56);
            }

            .name {
               margin: 8px 0;
               font-size: 14px;
            }

            .set {
               font-size: 15px;
               padding: 7px 14px;
               color: #FFF;
               border-radius: 4px;
               background-color: #515866;
            }
         }
      }
   }

   .fenye {
      position: absolute;
      bottom: 0;
      right: 0;
      width: calc(100% - 240px);
      height: 200px;
      // background-color: #333;
      display: flex;
      align-items: center;
      justify-content: center;
   }

}
</style>